<template>
  <div class="c-bg-sgray">
    <my-small-tabbar class="c-bg-white" :tabList="tabList" :tabIndex="liveType" @changeTab="changeType" v-if="isShowTab"></my-small-tabbar>
    <div class="c-ph24 c-pt24">
      <live-item :listType="2" :isMy='true' :liveList="list" v-if="liveType == 0"></live-item>
      <MyClasslive-item :listType="2" :liveList="list" v-if="liveType == 1"></MyClasslive-item>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无相关记录"></loading-status-tem>
    </div>
    <router-link to="/homePage/marketing/winningRecord?totalReward=1" class="myprize-entry c-pf" v-if="liveType == 0"></router-link>
    <router-link to="/member/myLive/myInvaitList" class="myInvaitList-entry c-pf" v-if="liveType == 0 && !$isStore()"></router-link>
  </div>
</template>

<script>
import LiveItem from "@/components/templates/liveItem.vue";
import MyClassliveItem from "@/components/templates/MyClassliveItem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
let pageIndex = 1;
let LIMIT = 10;
export default {
  name: "MyLiveCourse",
  components: {
    loadingStatusTem,
    LiveItem,
    MySmallTabbar,
    MyClassliveItem
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      dataStatus: 'HAS_MORE_DATA',
      list: [],
      tabList: [],
      liveType: 0,
      isShowTab: false,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    changeType(index) {
      pageIndex = 1;
      this.list = [];
      this.liveType = index;
      this.dataStatus = 'HAS_MORE_DATA';
      this.getLiveList();
    },
    getLiveList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let url = this.liveType == 1 ? 'livePrivateClass/${this.classId}/myClassList' : 'liveFlow/getMyLiveVideo';
      utilJs.getMethod(`${global.apiurl}${url}?page=${pageIndex}&limit=${LIMIT}`, res => {
        if (pageIndex == 1) {
          this.list = res.data;
        } else {
          this.list = [...this.list, ...res.data];
        }
        if (res.data && (res.data.length < LIMIT)) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl = window.location.href.split("#")[0] + "#" + this.$route.path + "?refereeId=" + localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "直播课程", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl = window.location.href.split("#")[0] + "#" + this.$route.path + "?refereeId=" + localStorage.getItem("userId");
      utilJs.appShareTrue("直播课程", "", shareUrl, "");
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.list.length > 0) {
          this.getLiveList();
        }
      });
    },
    initData() {
      pageIndex = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.list = [];
      this.getLiveList();
    },
  },
  activated() {
    setDocumentTitle("直播课程");// eslint-disable-line
    if ((this.companyAuth.enableTeleviseLive == 1 || this.companyAuth.enableLivePersonalModule == 1) && this.companyAuth.enableLivePrivateClass == 1) {
      this.isShowTab = true;
      this.tabList = [{title: "直播厅", index: 0}, {title: "小班课", index: 1}]
    } else if (this.companyAuth.enableTeleviseLive == 1 || this.companyAuth.enableLivePersonalModule == 1) {
      this.liveType = 0;
    } else if (this.companyAuth.enableLivePrivateClass == 1) {
      this.liveType = 1;
    }
    if (utilJs.checkNeedInitData(this.list, pageIndex)) {
      this.initData()
    }
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.myprize-entry {
  width:2.7rem;
  height: 2.1rem;
  background: url("../../../assets/i/wap/live/dzp_prize_entry.png") no-repeat
    center center;
  background-size: 100% 100%;
  left: calc(50% + 4.8rem);
  bottom: 6rem;
}
.myInvaitList-entry {
  width:2.7rem;
  height: 2.1rem;
  background: url("../../../assets/i/wap/live/invaitList.png") no-repeat
    center center;
  background-size: 100% 100%;
  left: calc(50% + 4.8rem);
  bottom: 9rem;
}
</style>
